﻿class DrawArea implements IDrawArea{
    
    private element: HTMLElement;
    private renderingContext: CanvasRenderingContext2D;
    private canvas: HTMLCanvasElement;
    private backgroundColor: string;

    private defaultHtml: string;
    private defaultStyle: MSCurrentStyleCSSProperties;

    private isCanvas: boolean = false;

    constructor(htmlElementId: string, backgroundColor: string) {
        this.element = document.getElementById(htmlElementId);
        this.CreateCanvas();
        this.HtmlToCanvas();
        this.backgroundColor = backgroundColor;
    }

    GetCanvas():HTMLCanvasElement {
        return this.canvas;
    }

    GetRenderingContext(): CanvasRenderingContext2D {
        return this.renderingContext;
    }
    

    private CreateCanvas() {
        this.canvas = document.createElement("canvas");
        this.canvas.width = this.element.clientWidth;
        this.canvas.height = this.element.clientHeight;

        this.renderingContext = this.canvas.getContext("2d");
    }

    GetBackgroundColor() {
        return this.backgroundColor;
    }

    HtmlToCanvas() {
        if (this.isCanvas) return;
        this.isCanvas = true;


        this.defaultHtml = this.element.innerHTML;
        this.defaultStyle = this.element.currentStyle;

        this.element.style.paddingTop = "0";       
        this.element.innerHTML = "";

     
        this.element.appendChild(this.canvas);
    }

    CanvasToHtml() {
        if (!this.isCanvas) return;
        this.isCanvas = false;

        this.element.innerHTML = this.defaultHtml;
        this.element.currentStyle = this.defaultStyle;
    }

} 